<template>
  <div class="content myFlex-y">
    <div class="novelSearch myFlex-x">
      <el-input
          v-model="novelName"
          style="width: 600px;height: 40px"
          size="large"
          placeholder="请输入小说名称"
          :suffix-icon="Search"
          @keydown.enter="searchNovel"
      />
      <el-button @click="searchNovel" class="searchBut" type="primary" plain>搜索</el-button>
    </div>
    <el-scrollbar height="900px" @end-reached="loadMore">
      <div class="novelList">
        <div class="novel" @click="goDetail(novel)" v-for="(novel,index) in novelList" :key="index">
          <div class="novelInfo">
            <ig :src="require('@/assets/img/'+novel.storyimg )" alt="小说图片">            <div class="novelName myFlex-x">
              {{novel.name}}
            </div>
            <div class="novelAuthor myFlex-x">
              {{novel.author}}
            </div>
          </div>
          <div class="read myFlex-x">
            阅读
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {require} from "@/utils/getFile.ts";
import request from "@/utils/request.ts";
import {ElMessage} from "element-plus";
import {router} from "@/router/router.ts";

const searchName = router.currentRoute.value.query.name

//根据名称搜索小说
onMounted(()=>{
  request.get("/getNovelPageList",{params:{name:searchName}})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    ElMessage.error(error)
  })
})

let novelName = ref('')

// 分页配置
let pageCurrent = ref(1)
let pageSize = ref(10)
onMounted(()=>{
  searchNovel()
})
let novelList = ref([])


// 根据输入的内容搜索小说

function searchNovel(){
  // 每次发送请求获取10条小说数据
  request.get("/getNovelPageList",{params:{pageCurrent:pageCurrent.value,pageSize:pageSize.value,novelName:novelName.value}})
      .then((res)=>{
        if (pageCurrent.value>1){
          // 将新获取到数据添加到集合的后面
          novelList.value = novelList.value.concat(res.data.records)
        }else {
          novelList.value = res.data.records
        }
      })
      .catch((error)=>{
        ElMessage.error(error)
      })
}
// 滚动到底部，触发事件获取更多数据
function loadMore(direction){
  if (direction === 'bottom'){
    pageCurrent.value ++;
    // 当滚动到底部的时候，再去获取下一页的数据
    searchNovel();
  }
}

//使用小说对象作为参数并打开新窗口跳转详情页（导航栏上只显示小说id和名字）
function goDetail(story) {
  window.open(router.resolve({path: '/details',query:{"story":JSON.stringify(story)}}).href)
}
</script>

<style scoped>
@import "@/assets/css/novelList.css";
</style>




